<template>
    <div>
        <div class="box_bg">
            <h2 class="box_tit">
                <i class="icon icon1"></i>数据字典
                <i class="reti"></i>
            </h2>
            <!-- <div class="blank20"></div> -->
            <!-- 字典内容区***结束 -->
            <div class="dict_box">
                <!-- 操作***开始 -->
                <div class="handle_box">
                    <el-button type="primary" icon="el-icon-plus" size="mini" @click="handleDict(['add',null])">添加字典</el-button>
                    <div class="search_box fr"  @keyup.enter="searchSubmit">
                        类型名称 ： <input type="text" v-model="searchInput.description" placeholder="请输入类型名称">&nbsp;&nbsp;&nbsp;
                        字典项名称 ： <input type="text" v-model="searchInput.name" placeholder="请输入字典项名称">
                        <a href="JavaScript:void(0);" class="btns search" @click="searchSubmit" v-loading.fullscreen.lock="fullscreenLoading">搜索</a>
                        <el-button size="mini" type="primary" icon="el-icon-refresh" @click="resertSearch">重置</el-button>
                    </div>
                </div>
                <!-- 操作***结束 -->
                <!-- 列表****开始 -->
                <div class="table3">
                    <ul class="thead3">
                        <li>类型标识</li>
                        <li>类型描述</li>
                        <li>序号</li>
                    </ul>
                    <ul class="tbody3">
                        <li v-for="item in dictsList" :key="item.id">
                            <!-- 字典列表 -->
                            <div class="dict_f" @click="dictDes(item,$event)">
                                <span>{{item.type}}</span>
                                <span>{{item.description}}</span>
                                <span>{{item.typeSort}}</span>
                            </div>
                            <!-- 字典列表 -->
                            <div v-if='haveChild(item.child)' class="beforeshow aftershow">
                                <table >
                                    <thead>
                                        <tr>
                                            <th>字典项值</th>
                                            <th>字典项名称</th>
                                            <th>序号</th>
                                            <th>操作</th>
                                            <th style='width: 100px;'>
                                                <a href="JavaScript:void(0);" class="btns" @click="handleDictEntry([item.type,'add',null])">增加</a>
                                            </th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <!-- <tr v-for="desc in descList"> -->
                                        <tr v-for="typesarr in item.child" :key="typesarr.id">
                                            <td>{{typesarr.value}}</td>
                                            <td>{{typesarr.name}}</td>
                                            <td>{{typesarr.itemSort}}</td>
                                            <td>
                                                <a href="javascript:void(0);" class="link_txt" @click="handleDictEntry([item.type,'edit',typesarr])">编辑</a>
                                                <a href="javascript:void(0);" class="link_txt" @click="del([typesarr.id,'dictEntry'])">删除</a>
                                            </td>
                                            <td></td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>

                        </li>
                    </ul>
                </div>
                <!-- 列表****结束 -->
            </div>
            <!-- 字典内容区***开始 -->
                <!-- 页码 -->
                <div class="paginationBox">
                    <el-pagination
                      @current-change="handleCurrentChange"
                      @size-change="handleSizeChange"
                      :current-page.sync="page.currentPage"
                      :page-sizes="[15,30,50,100]"
                      :page-size="page.visiblePages"
                      layout="total, sizes, prev, pager, next, jumper"
                      :total="page.totalPages">
                    </el-pagination>
                </div>
        </div>
        <!-- 弹层信息 -->
        <div class="layer" v-if='isLayer'>
            <div class="shade"></div>
            <!-- 删除**************** 开始 -->
                <div class="layerbody" v-if="orderLayer == 'del'">
                    <a href="javascript:void(0);" class="closes" @click='closeLayer'></a>
                    <h4>提示框</h4>
                    <div class="layerCon">
                        <div class="layerCon_l" style=""></div>
                        <div class="layerCon_r">
                            <h2>是否删除</h2>
                            <span>如果是请点击确定，不是请点击取消退出</span>
                        </div>
                    </div>
                    <div class="layerbtn">
                        <el-button class="btns" @click='delSubmit()' type="text" size="small">确定</el-button>
                        <el-button  class="btns cancel" @click="closeLayer" type="text" size="small">取消</el-button>
                    </div>
                </div>
            <!-- 删除**************** 结束 -->
            <!-- 字典维护**************** 开始 -->
                <div class="layerbody" v-if="orderLayer == 'dict'">
                    <a href="javascript:void(0);" class="closes" @click='closeLayer'></a>
                    <h4>类型维护</h4>
                    <el-form ref="dictInfo" :model="dictInfo" :rules="rules.dictInfo" label-width="105px" class="layerbox">
                        <el-form-item label="类型标识：" prop="type">
                            <el-input v-model="dictInfo.type" placeholder="请填写类型标识" ></el-input>
                        </el-form-item>
                        <el-form-item label="类型描述：" prop="description">
                            <el-input v-model="dictInfo.description" placeholder="请填写类型描述" ></el-input>
                        </el-form-item>
                        <el-form-item label="序号：" prop="typeSort">
                            <el-input v-model="dictInfo.typeSort" placeholder="请填写序号" ></el-input>
                        </el-form-item>
                    </el-form>
                    <div class="layerbtn">
                        <el-button class="btns" @click='addDictSubmit("dictInfo")' type="text" size="small">确定</el-button>
                        <el-button  class="btns cancel" @click="closeLayer" type="text" size="small">取消</el-button>
                    </div>
                </div>
            <!-- 字典维护**************** 结束 -->
            <!-- 字典项维护**************** 开始 -->
                <div class="layerbody"  v-if="orderLayer == 'dictEntry'">
                    <a href="javascript:void(0);" class="closes" @click='closeLayer'></a>
                    <h4>字典项维护</h4>
                    <el-form ref="dictEntry" :model="dictEntry" :rules="rules.dictEntry" label-width="105px" class="layerbox">
                        <el-form-item label="字典项值：" prop="value">
                            <el-input v-model="dictEntry.value" placeholder="请填写字典项值" ></el-input>
                        </el-form-item>
                        <el-form-item label="字典项名称：" prop="name">
                            <el-input v-model="dictEntry.name" placeholder="请填写字典项名称" ></el-input>
                        </el-form-item>
                        <el-form-item label="序号：" prop="itemSort">
                            <el-input v-model="dictEntry.itemSort" placeholder="请填写序号" ></el-input>
                        </el-form-item>
                    </el-form>
                    <div class="layerbtn">
                        <el-button class="btns" @click="addSubmit('dictEntry')" type="text" size="small">确定</el-button>
                        <el-button  class="btns cancel" @click="closeLayer" type="text" size="small">取消</el-button>
                    </div>
                </div>
            <!-- 字典项维护**************** 结束 -->
        </div>

    </div>

</template>

<script>
import {dictsUrl,dictsIdUrl,dictsTypesUrl,dictsTypesDUrl,dictsTypesSubListUrl} from "../../../axios/api.js"
export default {
    data() {
        return {
            isLayer:false,
            fullscreenLoading: false,
            orderLayer:'dict',
            searchInput:{
                name:'',
                description:''
            },  //字典搜索
            delCurrentId:'',
            dictsList:[],
            isPage:true,
            page: { // page组件需要数据
                totalPages: 0,
                visiblePages: 15,
                currentPage: 1
            },
            currentType:'',   //当前操作的字典类型
            genre:[],       //当前操作类型，
            descList:[],
            dictInfo:{
                description:'',
                value:'',
                typeSort:"5",  //字典项的值
            },
            dictEntry:{
                value:'',
                name:'',
                itemSort:"5",  //字典项的值
            },
            rules:{
                dictInfo: {
                    description: [
                      { required: true, message: "类型描述不可为空", trigger: "blur" },
                      { min: 1, max: 101, message: '中英文，不得超过100个字', trigger: "blur" }
                    ],
                    type:[
                        { required: true, message: "类型标志不可为空", trigger: "blur" },
                        { min: 1, max: 101, message: '中英文，不得超过100个字', trigger: "blur" }
                    ],
                    typeSort:[
                        { required: true, message: "序号不可为空", trigger: "blur"},
                        { min: 1, max: 999, message: '必须是数值，默认数值是5，最大是999', trigger: "blur", type:'number',
                            transform(value){
                                if(!isNaN(value)){
                                    value = Number(value)
                                    return value;
                                }
                                return "";
                            }
                        }
                    ]
                },
                dictEntry:{
                    name: [
                      { required: true, message: "字典项不可为空", trigger: "blur" },
                      { min: 1, max: 101, message: '中英文，不得超过100个字', trigger: "blur" }
                    ],
                    value:[
                        { required: true, message: "字典项值不可为空", trigger: "blur" },
                        { min:1, max: 101, message: '中英文，不得超过100个字', trigger: "blur" }
                    ],
                    itemSort:[
                        { required: true, message: "字典项值不可为空", trigger: "blur"},
                        { min: 1, max: 999, message: '必须是数值，默认数值是5，最大是999', trigger: "blur", type:'number',
                            transform(value){
                                if(!isNaN(value)){
                                    value = Number(value)
                                    return value;
                                }
                                return "";
                            }
                        }
                    ]
                }
            }
        };
    },
    created() {

    },
    mounted() {
        var self = this;
        // 获取字典树
        self.getDicts(self.page.currentPage,self.page.visiblePages);
        //字典树展开
        $(".table3").delegate(".dict_f","click",function(){
            $(this).toggleClass("cur").siblings("").toggleClass("aftershow");
        });
    },
    methods: {
        // 重置
        resertSearch(){
            this.searchInput.name = '';
            this.searchInput.description = '';
            this.searchSubmit();
        },
        // 每页多少条
        handleSizeChange(val) {
            console.log(val);
          // 点击分也是 调用列表
          this.page.visiblePages = val;
          this.getDicts(this.page.currentPage,this.page.visiblePages);
        },
        // 字典分页
        handleCurrentChange(val) {
            // 点击分也是 调用列表
            this.page.currentPage = val;
            this.getDicts(this.page.currentPage,this.page.visiblePages);
        },
        //判断没有子集的时候，是否显示
        haveChild(item){
            if(!item){
                return false;
            }else{
                return true;
            }
        },
        // 关闭弹层
        closeLayer(currentPage,visiblePages){
            this.isLayer = !this.isLayer;
        },
        //获取字典信息
        getDicts(currentPage,visiblePages){
            let self = this;
            self.axios({
                method: "get",
                url: api.dictsUrl,
                params: {
                    "page": currentPage,
                    "pageSize": visiblePages
                }
            })
            .then(function(response) {
                if(response.data.success){
                    self.dictsList = response.data.data.list;
                    //页码列表
                    self.page.totalPages = response.data.data.total;
                    self.page.currentPage = response.data.data.pageNum;
                }else{
                    // 操作成功
                    self.$message({
                        message: response.data.msg,
                        type:'error',
                        center: true
                    });
                }
            })
        },
        // 获取某一字典信息
        dictDes(item,event){
            let self = this;
            let curUrl = dictsTypesSubListUrl.replace(/\{type\}/, item.type.toString());

            console.log(item);
            if(item.child == '' || item.child == null || item.child == undefined){
                self.axios({
                    method: "get",
                    url:  curUrl + '?type=' + item.type+'&&name='+ self.searchInput.name
                })
                .then(function(response) {
                    self.$set(item,'child', response.data.data);
                    self.descList.push(response.data.data);
                })
            }
        },
        //添加字典弹层
        del(arr){
            this.delCurrentId = arr[0];
            // 当前弹出层的类型
            this.orderLayer = 'del'
            if(arr[1] =='add'){
                this.dictInfo =  eval('(' + "{description:'',value:'',typeSort:'5'}"+')');
            }
            //显示弹层
            this.isLayer = !this.isLayer;
            // 记录当前是编辑还是增加
            this.genre[0] = arr[0];
        },
        //添加字典弹层
        handleDict(arr){
            // 当前弹出层的类型
            this.orderLayer = 'dict'
            if(arr[1] =='add'){
                this.dictInfo =  eval('(' + "{description:'',value:'',typeSort:'5'}"+')');
            }
            //显示弹层
            this.isLayer = !this.isLayer;
            // 记录当前是编辑还是增加
            this.genre[0] = arr[0];
            if(arr[1]){
                // 记录当前操作对象
                this.genre[0] = arr[1];
                this.dictInfo = arr[1];
            }
        },
        //添加字典项弹层
        handleDictEntry(arr){
            // 当前弹出层的类型
            this.orderLayer = 'dictEntry'
            if(arr[1] =='add'){
                this.dictEntry =  eval('(' + "{name:'',typeSort:'',itemSort:5}"+')');
            }
            //显示弹层
            this.isLayer = !this.isLayer;
            // 当前操作的字典类型
            this.currentType = arr[0];
            // 记录当前是编辑还是增加
            this.genre[0] = arr[1];
            if(arr[2]){
                // 记录当前操作对象
                this.genre[1] = _.cloneDeep(arr[2]);
                this.dictEntry = _.cloneDeep(arr[2]);
            }
        },
        //字典项提交
        addSubmit(dictEntry){
            let self = this;
            let curUrl ='';
            let curMethod ='';
            let curData='';
            //提交信息验证
            self.$refs[dictEntry].validate((valid) => {
                if (valid) {
                    // 验证通过
                    // 判断是添加还是修改
                    if(self.genre[0] == 'add'){
                        curMethod = "post";
                        curUrl = dictsTypesDUrl.replace(/\{type\}/, self.currentType.toString());
                        self.dictEntry.type = self.currentType;
                    }else if(self.genre[0] == 'edit'){
                        curMethod = "put";
                        curUrl = dictsIdUrl + self.dictEntry.id;
                    }
                        curData = self.dictEntry;
                    self.axios({
                        method: curMethod,
                        url: curUrl,
                        data: curData
                    })
                    .then(function(response) {
                        if(response.data.success){
                            // 操作成功
                            self.$message({
                                duration:1000,
                                message: response.data.msg,
                                type:'success',
                                center: true,
                                onClose:function(){
                                    self.isLayer = !self.isLayer;
                                    $(".dict_f").removeClass("cur").siblings("").removeClass("aftershow");
                                    self.getDicts();
                                }
                            });
                        }else{
                            // 操作成功
                            self.$message({
                                message: response.data.msg,
                                type:'error',
                                center: true
                            });
                        }
                    })
                } else {
                    //  验证失败
                    this.$message({
                        message: '请正确填写',
                        type:'error',
                        center: true
                    });
                }
            });
        },
        //字典提交
        addDictSubmit(dictInfo){
            let self = this;
            let curUrl ='';
            let curMethod ='';
            let curData='';
            //提交信息验证
            self.$refs[dictInfo].validate((valid) => {
                if (valid) {
                    // 验证通过
                    // 判断是添加还是修改
                    if(self.genre[0] == 'add'){
                        curMethod = "post";
                        curUrl = dictsTypesUrl
                    }else if(self.genre[0] == 'edit'){
                        curMethod = "put";
                        curUrl = dictsTypesUrl + self.dictInfo.id;
                    }
                        curData = self.dictInfo;
                    self.axios({
                        method: curMethod,
                        url: curUrl,
                        data: curData
                    })
                    .then(function(response) {
                        if(response.data.success){
                            // 操作成功
                            self.$message({
                                duration:1000,
                                message: response.data.msg,
                                type:'success',
                                center: true,
                                onClose:function(){
                                    self.isLayer = !self.isLayer;
                                    $(".dict_f").removeClass("cur").siblings("").removeClass("aftershow");
                                    self.getDicts();
                                }
                            });
                        }else{
                            // 操作成功
                            self.$message({
                                message: response.data.msg,
                                type:'error',
                                center: true
                            });
                        }
                    })
                } else {
                    //  验证失败
                    this.$message({
                        message: '请正确填写',
                        type:'error',
                        center: true
                    });
                }
            });
        },
        // 删除
        delSubmit(){
            let self = this;
            self.axios({
                method: 'delete',
                url: dictsIdUrl + self.delCurrentId,
            })
            .then(function(response) {
                if(response.data.success){
                    // 操作成功
                    self.$message({
                        duration:1000,
                        message: response.data.msg,
                        type:'success',
                        center: true,
                        onClose:function(){
                            self.isLayer = false;
                            $(".dict_f").removeClass("cur").siblings("").removeClass("aftershow");
                            self.getDicts();
                        }
                    });
                }else{
                    // 操作成功
                    self.$message({
                        duration:1000,
                        message: response.data.msg,
                        type:'error',
                        center: true,
                        onClose:function(){
                            self.isLayer = false;
                        }
                    });
                }
            })
        },
        //搜索
        searchSubmit(){
            //发送请求
            let self = this;
            self.fullscreenLoading = true;
            console.log(dictsUrl+"?description="+self.searchInput.description+"&&name=" + self.searchInput.name)
            self.axios({
                method: 'get',
                url: dictsUrl,
                params: {
                    description: self.searchInput.description,
                    name: self.searchInput.name,
                    page: self.page.currentPage,
                    pageSize: self.page.visiblePages
                }
            })
            .then(function(response) {

                self.fullscreenLoading = false;
                if(response.data.success){
                    self.dictsList = response.data.data.list;
                    if(response.data.data.list.length > 0){
                        //页码列表
                        self.page.totalPages = response.data.data.total;
                        self.page.currentPage = response.data.data.pageNum;
                        $(".dict_f").removeClass('cur')
                    }
                }else{
                    // 操作成功
                    self.$message({
                        message: response.data.msg,
                        type:'error',
                        center: true
                    });
                }
            })
        }
    },

    components: {}
};
</script>
<style scoped>
    input{
        width: 150px;
    }
    .handle_box{
        overflow: hidden;
        margin-bottom: 20px;
    }
    /**table***/
    .thead3,.tbody3,.dict_f{
        overflow: hidden;
    }
    .tbody3{
        border-bottom: 1px solid #dadada;
    }
    .thead3 li,.dict_f span{
        padding: 6px 0 5px 45px;
        text-align: center;
        min-height: 36px;
        width: 33.333%;
        border: 1px solid #dadada;
        border-width: 1px 0 0 1px;
        -webkit-box-sizing: border-box;
           -moz-box-sizing: border-box;
                box-sizing: border-box;
        float: left;
    }
    .thead3 li:nth-child(3),.dict_f span:nth-child(3){
        border-right: 1px solid #dadada;
    }
    table,tr,td{
        border: 1px solid #dadada;
        color: #666;
        box-sizing: border-box;
    }
    table{
        width: 100%;
    }
    td,.dict_f span{
        text-align: center;
        vertical-align: middle;
    }
    .thead3 li,thead th{
        text-align: center;
        font-weight: bold;
        background: #fbfbfb;
    }
    tbody tr:nth-child(2n) td{
        background: #f9f9f9;
    }
    .tbody3>li>table{
        display: none;
        border-bottom: none;
    }
    .tbody3>li>table,.tbody3>li>table tr:last-child,.tbody3>li>table tr:last-child td{
        border-bottom: none;
    }
    .tbody3 .dict_f{
        background: url('../../../../static/img/treeTable1.png') no-repeat 8px center;
    }
    .tbody3 .dict_f.cur{
        background: url('../../../../static/img/treeTable2.png') no-repeat 8px center;
    }
    .tbody3 .dict_f span:nth-child(1){
        padding-left: 45px;
        text-align: left;
        background: url('../../../../static/img/wjJ0.gif') no-repeat 24px center;

    }
    .tbody3 .dict_f.cur span:nth-child(1){
        background-image: url('../../../../static/img/wjJ.jpg');

    }
    .beforeshow{
        overflow: hidden;
        height: 0;
        transition: all 4s;
        -moz-transition: all 4s;  /* Firefox 4 */
        -webkit-transition: all 4s;   /* Safari 和 Chrome */
        -o-transition: all 4s;
    }
    .aftershow{
        height: auto;
    }


</style>